<template>
  <Panel title="商品分类">
    <!-- <span slot="text">账号列表</span> -->
    <div slot="btn">
      <el-button type="primary" size="mini" @click='dialogVisible=true'>添加分类</el-button>
    </div>
    <div slot="content">
      <!-- 表格 -->
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          
        >
          <!-- 序号 -->
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <!-- 分类名称 -->
          <el-table-column label="分类名称" width="300" >
            <template slot-scope="scope">
              <span v-if="!scope.row.isEdit">{{scope.row.cateName}}</span>
              <el-input type="text" v-else v-model="scope.row.cateName"></el-input>
            </template>
            
          </el-table-column>
          <!-- 是否启用 -->
          <el-table-column label="是否启用" width="180">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled='!scope.row.isEdit'
                
              >
              
              </el-switch>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
              :type="!scope.row.isEdit?'default':'success'"
                >{{!scope.row.isEdit?'编辑':'完成'}}</el-button
              >
              <el-button size="mini" v-show="scope.row.isEdit" @click="scope.row.isEdit=false">
                取消</el-button>
              <el-popconfirm
                title="你确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
                class="ml20"
              >
                <el-button slot="reference" size="mini" type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 对话框 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible">
        <el-form :model="editCate" size="small">
          <el-form-item label="分类名称" lable-width="100px">
            <el-input v-model="editCate.cateName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" lable-width="100px">
             <el-switch
                v-model="editCate.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                
              >
              </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 8, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>

     
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";
import { addGoodsCate, delGoodsCate, getGoodsList,editGoodsCate} from "@/api/user";

export default {
  components: {
    Panel,
  },

  // 表格
  data() {
    return {
        // 是否启用
        value: true,

      tableData: [],

      currentPage: 1,
      pageSize: 10,
      total: 0,

      
      // 对话框
      dialogVisible: false,

      form: {},

      editCate:{
        cateName:'',
        state:0
      },

      // 是否启用
      value:false,

      // isEdit:true,
    };
  },
  created() {
    this.getData();
  },

  methods: {
   
// 添加分类
async addCategory(){
  // this.dialogVisible=true
    this.editCate.state=this.editCate.state?1:0;
    let res=await addGoodsCate(this.editCate);
    console.log('===>',res);
    if(res.data.code==0){
      this.dialogVisible=false
        this.editCate={},
        this.editCate.state=false
        this.getData()
    }
},

    // 编辑功能
    async handleEdit(row){
      row.isEdit=!row.isEdit

// 判定---只有点击完成时才进行修改操作
      if(!row.isEdit){
        row.state=row.state?1:0;
        let res=await editGoodsCate(row);
        if(res.data.code==0){
          this.getData()
        }
      }
          },


    // 把选中的需要删除的id放入ids中
    hanndleSelectionChange(val) {
      // console.log(val);
      this.ids = val.map((v) => v.id);
      // console.log(this.ids);
    },

   
    handleSizeChange() {},
    formInline() {},

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getData();
    },


    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchCancel() {
      this.$refs.multipleTable.clearSelection();
    },

    // 列表数据
    async getData() {
      let res = await getGoodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      // console.log('===>',res);
      // console.log(res.data);

      let { data, total } = res.data;

      data.map(v=>v.state=v.state?true:false)

      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1;
        this.getData();
      }

      // 添加一个是否可以编辑状态
      
         data.map(v=>{
        v.isEdit=false
      }),
      
     

      this.tableData = data;
      this.total = total;
    },



  // 删除
    async handleDelete(id) {
      let res = await delGoodsCate({ id });

      if (res.data.code == 0) {
        // this.$message.success(res.data.msg);
        this.getData();
      }
    },

    
  },
};
</script>

<style lang="less" scoped>
.block {
  margin-top: 20px;
}
.button {
  margin-top: 20px;
}
.el-input {
  width: 200px;
}
/deep/.el-dialog {
  width: 400px;
}

.ml20 {
  margin-left: 20px;
}
</style>